<template>

     <div class="c-login">
        <div>
        <div class="c-logo">
            <img src="../../common/image/sufn_logo_black.png" alt="">
        </div>
         <!-- size="large" -->
        <div class="c-login-name">
            <el-input
                v-model="name"
                class="w-50 m-2"
               
                type="text"
                placeholder="请输入登录账号"
                :suffix-icon="Avatar"
                />
        </div>
        <!-- size="large" -->
         <div class="c-login-pass">
            <el-input
                v-model="password"
                class="w-50 m-2"
                type="password"
                placeholder="请输入登录密码"
                :suffix-icon="Unlock"
            />

        </div>
        

        <div class="c-login-check">
           <div class="c-login-jzzh" @click="remembername"><input type="checkbox" :checked='checked3' name="" id=""/>记住账号</div>
           <div class="c-login-jzmm"  @click="rememberpassword"><input type="checkbox" :checked='checked4' name="" id="" />记住密码</div>
        </div>
        <div class="c-login-bt" @click="logions">确认
        </div>
        <div class="c-login-bb"><span>c</span> SUFN照明项目管理系统 - Power</div>
     </div>
     <!-- <el-button :plain="true" @click="open2">success</el-button> -->
     </div>
    <!-- <div class="logins" @click="logingo">/div> -->

</template>
<script>
import { Unlock,Avatar} from '@element-plus/icons-vue'
import {onMounted, getCurrentInstance,ref,reactive} from "vue";
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
// import { useRouter } from 'vue-router'
// export default {
//   name: 'App',
//   setup () {
//   	const router = useRouter()
//     router.push({ path: '/login' }) 
//   }
// }

import {loginto} from '../../api/api.js'
import { useRouter,useRoute} from 'vue-router'
export default {
   
    setup() {
        const data = reactive({ logindata: [], });
        
        const isDisabled=ref(false)
        const name = ref('')
         const password = ref('')
        const { ctx } = getCurrentInstance();
        
         const router = useRouter()
        const route = useRoute()
        const logingo=function(){
            console.log('ctx.$router',ctx.$root.$router)
            console.log('router',router)
            console.log('sdsad')
            localStorage.setItem('token','登录')
            // console.log(router.currentRoute.value.query.redirect)
            
           
        }
        const checked3 = ref(false)
        const checked4 = ref(false)
        // sessionStorage.removeItem("remembername");
        
        if(localStorage.getItem('remembername')=='true'){
            console.log('1111')
          checked3.value = true
          name.value=localStorage.getItem('username') != null?localStorage.getItem('username'):''
        }
         if(localStorage.getItem('rememberpassword')=='true'){
         checked4.value = true
         password.value=localStorage.getItem('userpassword') != null?localStorage.getItem('userpassword'):''
        }
        //记住登录账号密码
        const remembername = ()=>{
            
            checked3.value =! checked3.value
            console.log(checked3.value)
        }
         const rememberpassword = ()=>{
            checked4.value = !checked4.value
            console.log(checked4.value)
        }
            
                
        const logions=()=>{
            console.log(ElMessage)
            
            if(isDisabled.value==true){
                return
            }
            if(name.value==''){
                console.log(name.value=='')
                ElMessage({
                    message: '请输入登录账号',
                    type: 'warning',
                })
            }else if(password.value==''){
                 ElMessage({
                    message: '请输入登录密码',
                    type: 'warning',
                })
            }else{
            const data={
                        loginCode:name.value,
                        password:password.value
                        }
            console.log(data)
            loginto(data).then( res=>{
                console.log(res)
                if(res.result==0){
                    
                     localStorage.setItem('remembername',checked3.value)
                     localStorage.setItem('rememberpassword',checked4.value)
                     localStorage.setItem('userinfoId',res.user.id)
                     localStorage.setItem('identity',res.user.identity)
                     if(checked3.value==true){
                        localStorage.setItem('username',res.user.loginCode)
                     }else{
                        localStorage.removeItem('username')
                     }
                      if(checked4.value==true){
                        localStorage.setItem('userpassword',res.user.password)
                     }else{
                        localStorage.removeItem('userpassword')
                     }
                     ElMessage({
                     message: '登录成功',
                     type: 'success',
                   })
                   //如果存在参数跳转到参数页面
                   setTimeout(function(){
                    if(router.currentRoute.value.query.redirect){
                            router.push(router.currentRoute.value.query.redirect)
                //  ctx.$router.push({ path: '/',  query: { aa:'1000' } });
                    }else{
                       router.push("/")
                  }
                   },500)
                     
                }else{
                     ElMessage({
                    message: '账号或密码错误，请重新输入',
                    type: 'error',
                })
                }
               
            })
            .catch(res => {
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });

            }
            // console.log(loginto)
           
            
            isDisabled.value=true
            setTimeout(()=>{
              isDisabled.value = false;
          },3000)
        //     setTimeout(()=>{
        //       this.isDisabled = false;
        //   },3000)
           
        }
      
        
        
        return{
            loginto,
            Avatar,
            Unlock,
            name,
            password,
            checked3,
            checked4,
            remembername,
            rememberpassword,
            logions,
            
        }
        
    },

    data(){
        return{

        }
    },
     mounted(){
        //    console.log(this.$router.params.redirect)
     },
     
    
}
</script>
<style scoped>
.logins{
    color: rgba(34, 82, 62, 0.295);
}
.c-login{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.c-login div{
    text-align: center
}
.el-input{
   height: 56px;
   font-size: 24px;
/* background: #FFFFFF;
border-radius: 8px;
border: 1px solid #020113; */
}
.el-input__wrapper{
box-shadow: 0 0 0 1px black;
}
.c-login-name{
 width: 580px;
height: 56px;
/* border: 1px solid #020113;  */
border-radius: 8px;
margin-top: 40px;
}
.c-login-pass{
     width: 580px;
height: 56px;
/* border: 1px solid #020113;  */
border-radius: 8px;
margin-top: 32px;

}
.c-logo img{
    width: 347px;
    height: 80px;

}
.c-login-check{
    width: 580px;
    font-size: 24px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 32px;
    height: 36px;
    line-height: 36px;
}
.c-login-check div {
    line-height: 36px;
}
.c-login-check div input{
    height: 36px;
    width: 36px;
    
}
.c-login-jzmm{
    display: flex;
    align-items: center;
    margin-left: 120px;
}
.c-login-jzzh{
    display: flex;
    align-items: center;
}
.c-login-bt{
    width: 580px;
    height: 56px;
    background: #020113;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 56px;
    margin-top: 32px;
}
.c-login-bb{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color:#81828E;
    margin: 0 auto;
    margin-top: 16px;

}
.c-login-bb span{
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #81828E;
    line-height: 14px;
    border: 1px solid #81828E;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    display: block
}

</style>